<template>
    <view class="searchBar" :class="{ 'light-style': lightStyle, setbg: setBg }">
        <view class="searchBar-main">
            <iconsfont customIcons="icon-sousuo" :color="'#999999'" size="30"></iconsfont>
            <text class="input-style" v-if="gosearch" @click="goSearch">{{ placeholderText }}</text>
            <input v-else class="input input-search" :auto-focus="autoFocus" :placeholder="placeholderText"
                confirm-type="search" @confirm="doConfirmFn" placeholder-style="color:#cccccc" v-model="value"
                @input="changeValue" />
            <image v-if="value && value.length > 0" class="btn-clear-value" src="@/static/icon/icon_input_clear.png"
                @click="clearValue"></image>
            <text v-if="showSearchBtn" class="btn-search" @click="searchFn">搜索</text>
        </view>
        <view class="searchBar-actions" v-if="actions && actions.length > 0">
            <view class="btn-action-item" :key="item.id" v-for="item in actions" @click="clickAction(item)">
                <uni-icons v-if="item.iconType == 1" :type="item.type" :color="'#333333'" size="44"></uni-icons>
                <text v-if="item.iconType == 1 && cartnum > 0" class="badge">{{ cartnum }}</text>
                <iconsfont v-if="item.iconType != 1 && item.iconType != 3 && !item.isTextType" :customIcons="item.type"
                    :color="'#333333'" :size="item.type == 'icon-saoyisao' ? 52 : 36"></iconsfont>
                <iconsfont v-if="item.iconType == 3" :customIcons="item.type" :color="'#333333'" size="48"></iconsfont>
                <text class="btn-text" v-if="item.iconType != 1 && item.isTextType">{{ item.type }}</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        placeholderText: {
            type: String,
            default: "",
        },
        cartnum: {
            type: Number,
            default: 0,
        },
        productType: {
            type: Number,
            default: 1,
        },
        searchValue: {
            type: String,
            default: "",
        },
        showSearchBtn: {
            type: Boolean,
            default: true,
        },
        gosearch: {
            type: Boolean,
            default: false,
        },
        lightStyle: {
            type: Boolean,
            default: false,
        },
        autoFocus: {
            type: Boolean,
            default: false,
        },
        setBg: {
            type: Boolean,
            default: false,
        },
        actions: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            value: "",
        }
    },
    watch: {
        searchValue(newVal, oldVal) {
            this.value = newVal
        },
    },
    mounted() {
        this.value = this.searchValue
    },
    methods: {
        searchFn() {
            //搜索
            let key = this.value
            if (key && key.length) {
                key = key.trim()
            } else {
                key = ""
            }
            this.$emit("searchFn", key)
        },
        clickAction(item) {
            //功能点击
            this.$emit("actionFn", item)
        },
        changeValue(input) {
            //输入变化
            this.value = input.detail.value
            this.$emit("changeSearchValue", input.detail.value)
        },
        getValue() {
            let key = this.value
            if (key && key.length) {
                key = key.trim()
            } else {
                key = ""
            }
            return key
        },
        goSearch() {
            this.getSearch()
        },
        getSearch() {
            if (this.productType == 4) {
                this.easyGoTo("/pages_shop/packet/search/index?productType=" + this.productType)
            } else {
                this.easyGoTo("/pages_shop/packet/search/index")
            }
        },
        clearValue() {
            this.value = ""
            this.$emit("changeSearchValue", this.value)
            if (this.showSearchBtn) {
                this.searchFn()
            } else {
                this.$emit("actionFn", this.actions[0])
            }
        },
        setValue(key) {
            this.value = key
            if (this.showSearchBtn) {
                this.searchFn()
            } else {
                this.$emit("actionFn", this.actions[0])
            }
        },
        doConfirmFn() {
            if (this.showSearchBtn) {
                this.searchFn()
            } else {
                this.$emit("actionFn", this.actions[0])
            }
        },
    },
    watch: {
        searchValue(newdata, olddata) {
            this.value = newdata
        },
    },
}
</script>

<style lang="scss" scoped>
.searchBar {
    display: flex;
    flex-direction: row;
    padding: 12rpx $app-item-padding;
    align-items: center;
    background: $color-white;
    height: 96rpx;

    .searchBar-main {
        display: flex;
        flex-direction: row;
        flex: 1;
        background: $color-white;
        height: 72rpx;
        border-radius: 36rpx;
        align-items: center;
        padding: 0 20rpx;
        border-radius: 36rpx;
        border: 1rpx solid #cccccc;

        .input-search {
            display: flex;
            flex: 1;

            padding: 10rpx;
            font-size: 24rpx;
        }

        .btn-search {
            display: flex;
            height: 72rpx;
            width: 100rpx;
            align-items: center;
            justify-content: center;
            font-size: $font-size-28;
        }
    }

    .searchBar-actions {
        display: flex;
        flex-direction: row;
        margin-right: -20rpx;

        .btn-action-item {
            width: 88rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }
    }

    .btn-clear-value {
        width: 32rpx;
        height: 32rpx;
        padding: 10rpx 18rpx;
    }
}

.btn-text {
    font-size: $font-size-28;
}

.light-style {
    background: $color-white;

    .searchBar-main {
        background: #f5f5f5;
        border: none;
    }

    .btn-action-item {
        text {
            color: $app-color-text-mian;
        }
    }
}

.setbg {
    background: $app-color-main;
}

.input-style {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
    font-size: 28rpx;
    color: rgb(170, 170, 170);
    padding-left: 20rpx;
}

.badge {
    height: 14px;
    line-height: 14px;
    /* #ifdef APP-NVUE */
    flex: 1;
    /* #endif */
    margin-top: 5px;
    font-size: 10px;
    padding-left: 4px;
    padding-right: 4px;
    text-align: center;
    color: #fff;
    transform: translate(50%, -50%);
    background-color: #fe5128;
    border-radius: 9999px;
    position: absolute;
    top: -5rpx;
    right: 24rpx;
}
</style>
